<template>
	<view class="tab-container">
		<view class="tab-box">
			<scroll-view class="scroll-view" id="_scroll" :scroll-left="scrollLeft" scroll-x scroll-with-animation>
				<view class="scroll-content">
					<view class="tab-item-box">
						<block v-for="(item, index) in tabData" :key="index">
							<view class="tab-item" :id="'_tab_' + index" :class="{'tab-item-active': activeIndex === index}"
								@click="tabClick(index)" :style="{
									color: activeIndex === index? defaultConfig.activeTextColor:defaultConfig.textColor
								}">
								{{item.label || item}}
							</view>
						</block>
					</view>
					<!-- 滑块 -->
					<view class="underLine"
						:style="{ transform:'translateX(' + silder.left + 'px)', width: defaultConfig.underLineWidth +'px', height: defaultConfig.underLineHeight +'px', backgroundColor:defaultConfig.underLineColor+'px'}">
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-tabs",
		props: {
			// 父组件传入的tabs数据
			tabData: {
				type: Array,
				default: () => []
			},
			// 默认激活项
			defaultIndex: {
				type: Number,
				default: 0
			},
			// 配置对象
			config: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				activeIndex: -1,
				// 滑块
				silder: {
					// 距离左侧的距离
					left: 0
				},
				// 默认配置
				defaultConfig: {
					// 默认字体的颜色
					textColor: '#333333',
					// 高亮字体颜色
					activeTextColor: '#f94d2a',
					// 下划线宽度 px
					underLineWidth: 24,
					// 下划线高度
					underLineHeight: 2,
					// 下滑线颜色
					underLineColor: '#f94d2a'
				},
				// 内部维护数据， 为每个item 单独维护一个滑块对象
				tabList: [],
				// scrollView的横向滚动条位置
				scrollLeft: 0
			};
		},
		methods: {
			// 用户点击
			tabClick(index) {
				this.activeIndex = index
				this.$emit('click', index)
				this.tabToIndex()
			},
			// 根据当前 activeIndex 下标 计算滑块 滚动位置
			tabToIndex() {
				if (this.tabList.length === 0) return
				// 获取当前activeIndex
				const activeIndex = this.activeIndex
				// 获取滑块的宽度
				const underLineWidth = this.defaultConfig.underLineWidth
				// 配置滚动的距离
				// console.log(this.tabList[activeIndex]._slider);
				this.silder = {

					left: this.tabList[this.activeIndex]._slider.left
				}
				// 点击位移
				// this.scrollLeft = this.activeIndex * this.defaultConfig.underLineWidth

				// 控制scroll 进行横向的滚动
				this.scrollLeft = this.activeIndex * this.defaultConfig.underLineWidth
			},
			// 更新 tab item 的宽度
			updateTabWidth() {
				// 为tabList每个item 单独额外维护一个silder的滑块对象
				let data = this.tabList
				if (data.length === 0) return false
				// 获取dom
				const query = uni.createSelectorQuery().in(this)
				// 循环数据源
				data.forEach((item, index) => {
					// 获取dom固定写法
					query
						.select('#_tab_' + index)
						.boundingClientRect((res) => {
							// console.log(res);
							// 为数据对象中的每一个item 都维护一个_slider 滑动条对象
							item._slider = {
								// 当前的tab距离左侧的距离
								left: res.left + (res.width - this.defaultConfig.underLineWidth) / 2
							}
							// 运算完成之后，执行一次 滑块位置运算
							if (data.length - 1 === index) {
								this.tabToIndex()
							}
						})
						.exec()
				})
			}
		},
		// 监听项目变化
		watch: {
			defaultIndex: {
				handler(val) {
					this.activeIndex = val
					// 重新计算滑块位置
					this.tabToIndex()
				},
				immediate: true
			},
			tabData: {
				handler(val) {
					// tabList和tabData数据同步
					this.tabList = val
					// 维护tabList 中的每一个 item,在dom完成渲染之后进行
					// this.$nextTick() 虽然支持，但存在兼容性的问题
					setTimeout(() => {
						// 计算item 的slider
						this.updateTabWidth()
					}, 0)
				},
				immediate: true
			},
			// 监听config 发生变化时，回调的方法
			config: {
				handler(val) {
					this.defaultConfig = {
						...this.defaultConfig,
						...val
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-container {
		font-size: $uni-font-size-base;
		height: 45px;
		line-height: 45px;
		background-color: $uni-bg-color;

		.tab-box {
			width: 100%;
			height: 45px;
			display: flex;
			position: relative;

			.scroll-view {
				white-space: nowrap;
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				.scroll-content {
					width: 100%;
					height: 100%;
					position: relative;

					.tab-item-box {
						height: 100%;

						.tab-item {
							height: 100%;
							display: inline-block;
							text-align: center;
							padding: 0 15px;
							position: relative;
							text-align: center;
							color: $uni-text-color;

							&-active {
								color: red;
							}
						}
					}

					.underLine {
						height: 2px;
						width: 25px;
						background-color: #f01414;
						border-radius: 3px;
						transition: 0.5s;
						position: absolute;
						bottom: 0;
					}

				}
			}
		}

	}
</style>